<template>
    <div style="padding-top: 20px;">
        <el-card >
            <!--题目信息-->
            <div >
                <div class="header">
                    <div class="l-box">
                        <el-button type="primary" size="medium">我的题目</el-button>
                        <span style="font-size: 20px;margin-left: 10px;font-weight: bold">{{detail.title}}</span>
                    </div>
                </div>
                <div class="info">
                    <div>
                        <span style="width: 70px;">{{(detail.typeId == 1) ? '选择题' : (detail.typeId == 2) ? '填空题' : '编程题'}}</span>
                        <i class="el-icon-user-solid"></i><span>{{detail.author}}</span>
                    </div>
                    <div>
                        <el-alert v-if="testStatus == true" type="success" :closable="false" style="width: 120px;display: inline-block">
                            <i class="el-icon-check"></i><span>测试成功</span>
                        </el-alert>
                        <el-alert v-if="testStatus == false" type="error" :closable="false" style="width: 120px;display: inline-block">
                            <i class="el-icon-close"></i><span>测试失败</span>
                        </el-alert>
                    </div>

                </div>
            </div>
        </el-card>


        <!--题目预览，描述，题解，统计，评测-->
        <el-tabs type="border-card" style="margin-top: 25px;">
            <el-tab-pane label="描述">
                <mavon-editor
                        class="description"
                        :value="detail.context"
                        :subfield="false"
                        defaultOpen="preview"
                        :toolbarsFlag="false"
                        :editable="false"
                        :scrollStyle="true"
                        style="min-height:100px">
                </mavon-editor>
            </el-tab-pane>
            <el-tab-pane label="标准答案">
                <mavon-editor
                        class="description"
                        :value="standardcode"
                        :subfield="false"
                        defaultOpen="preview"
                        :toolbarsFlag="false"
                        :editable="false"
                        :scrollStyle="true"
                        style="min-height:100px">
                </mavon-editor>
            </el-tab-pane>
<!--            <el-tab-pane label="统计">-->
<!--                统计-->
<!--            </el-tab-pane>-->
            <el-tab-pane label="样例">
                <div class="info">
                    <h4>测试数据</h4>
                    <div class="r-box">
                        <el-button type="primary" size="medium" style="width: 120px;"
                                   @click="dialogFormVisible = true">新增样例</el-button>

                        <!--新增样例弹窗开始-->
                        <el-dialog title="新增测试样例" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="名称" :label-width="formLabelWidth">
                                    <el-input v-model="form.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="分数" :label-width="formLabelWidth">
                                    <el-input v-model="form.score" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="输入" :label-width="formLabelWidth">
                                    <el-input v-model="form.input" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="输出" :label-width="formLabelWidth">
                                    <el-input v-model="form.output" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="备注" :label-width="formLabelWidth">
                                    <el-input type="textarea"
                                              :rows="2"
                                              v-model="form.note"
                                              autocomplete="off"
                                              placeholder="请输入提示信息"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="addTest()">确 定</el-button>
                            </div>
                        </el-dialog>
                        <!--新增样例弹窗结束-->
                    </div>
                </div>
                <el-table
                        ref="multipleTable"
                        :data="test"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="indexChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="名称"
                            prop="name"
                            width="120"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="score"
                            label="分数"
                            width="70"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="note"
                            label="备注"
                            width="120"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="120"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-tooltip content="查看" placement="bottom" visible-arrow="false">
                                <el-button @click="lookClick(scope.row)" type="primary" icon="el-icon-search" size="small"></el-button>
                            </el-tooltip>

                            <!--查看样例弹窗开始-->
                            <el-dialog title="查看测试样例" :visible.sync="demoVisiable">
                                <el-descriptions :title="form.name" column="1">
                                    <el-descriptions-item label="分数">{{form.score}}</el-descriptions-item>
                                    <el-descriptions-item label="输入">
                                        <el-alert type="success" :closable="false"><span>{{form.input}}</span></el-alert>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="输出">
                                        <el-alert type="success" :closable="false"><span>{{form.output}}</span></el-alert>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="备注">{{form.note}}</el-descriptions-item>
                                </el-descriptions>
                            </el-dialog>
                            <!--查看样例弹窗结束-->
                            <el-tooltip content="编辑" placement="bottom" visible-arrow="false">
                                <el-button @click="updateClick(scope.row)" type="success" icon="el-icon-edit" size="small"></el-button>
                            </el-tooltip>

                            <!--编辑样例弹窗开始-->
                            <el-dialog title="编辑测试样例" :visible.sync="updateDialogVisible">
                                <el-form :model="form">
                                    <el-form-item label="名称" :label-width="formLabelWidth">
                                        <el-input v-model="form.name" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="分数" :label-width="formLabelWidth">
                                        <el-input v-model="form.score" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="输入" :label-width="formLabelWidth">
                                        <el-input v-model="form.input" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="输出" :label-width="formLabelWidth">
                                        <el-input v-model="form.output" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="备注" :label-width="formLabelWidth">
                                        <el-input type="textarea"
                                                  :rows="2"
                                                  v-model="form.note"
                                                  autocomplete="off"
                                                  placeholder="请输入提示信息"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="updateDialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="updateTest()">确 定</el-button>
                                </div>
                            </el-dialog>
                            <!--编辑样例弹窗结束-->

                            <el-tooltip content="删除" placement="bottom" visible-arrow="false">
                                <el-button @click="deleteTest(scope.row)" type="danger" icon="el-icon-delete" size="small"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    //axios
    import axios from 'axios';
    import CodeMirror from '../../../../components/CodeMirror';


    export default {
        name: "",
        components: {
            CodeMirror
        },
        data(){
            return {
                tableData: [],
                multipleSelection: [],  //样例多选框
                detail: {},             //题目详情
                gridData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                demoVisiable:false,
                form: {
                    id: '',
                    name: '',
                    score: 0,
                    note: '',
                    output: '',
                    questionId: '',
                    input: ''
                },
                formLabelWidth: '120px',
                test: [],              //样例详情
                updateDialogVisible: false,
                testIds: '',  //样例id
                standardcode: '',  //标准答案代码
                token: '',
                testStatus: false,  //测试状态
            }
        },
        methods: {
            toggleSelection(rows) {
                this.$refs.multipleTable.clearSelection();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick(row) {
                console.log(row);
            },
            //当前选中值的id
            indexChange(sels){
                this.ids = '';
                var ids = sels.map(it=>it.id);
                for(var i = 0; i < ids.length; i++){
                    this.ids = (i == 0) ? this.ids + ids[i] : this.ids + '&' + ids[i];
                }
            },
            //新增样例
            addTest(){
                this.dialogFormVisible = false;
                //题目id
                this.form.questionId = this.detail.id;
                let params = this.form;
                var that = this;

                //发送请求
                /*
                    接口: 新增测试样例
                    请求地址: http://localhost:8881/producer/test/add
                    请求方法: post
                    请求参数: 查询条件
                    响应内容: 响应结果
                */
                axios({
                    method: 'post',
                    url: 'http://localhost:8881/producer/test/add',
                    data: params,
                    headers: {token: this.token}
                }).then(function (response) {
                    var res = response.data;
                    if(res.code == 200){
                        that.$message.success('新增成功！');
                    }else{
                        that.$message.error('新增失败！');
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //选中编辑
            updateClick(data){
                this.form = data;
                this.updateDialogVisible = true;
            },

            //选中查看
            lookClick(data){
                this.form = data;
                this.demoVisiable = true;
            },
            //编辑题目集
            updateTest(){
                //关闭弹窗
                this.updateDialogVisible = false;

                let params = this.form;
                var that = this;

                //发送请求
                /*
                    接口: 编辑样例
                    请求地址: http://localhost:8881/producer/test/update
                    请求方法: post
                    请求参数: 样例信息
                    响应内容: 响应结果
                */
                axios({
                    method: 'post',
                    url: 'http://localhost:8881/producer/test/update',
                    data: params,
                    headers: {token: this.token}
                }).then(function (response) {
                    var res = response.data;
                    if(res.code == 200){
                        that.$message.success('修改成功！');
                        //跳转页面
                        //that.$router.push('/home')
                    }else{
                        that.$message.error('修改失败！');
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //删除样例
            deleteTest(data){
                //发送请求
                var that = this;
                if(this.testIds == '' && data != null){
                    this.testIds = data.id;
                }

                //发送请求
                /*
                    接口: 删除样例
                    请求地址: http://localhost:8881/producer/test/delete
                    请求方法: get
                    请求参数: id，使用&连接
                    响应内容: 响应结果
                */
                axios({
                    method: 'get',
                    url: 'http://localhost:8881/producer/test/delete',
                    params: {
                        ids: this.testIds
                    },
                    headers: {token: this.token}
                }).then(function (response) {
                    var res = response.data;
                    if(res.code == 200){
                        that.$message.success('删除成功！');
                        //跳转页面
                        //that.$router.push('/home')
                    }else{
                        that.$message.error('删除失败！');
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
        },
        created: function () {
            var id = this.$route.query.id;
            //初始化页面
            let params = {questionId: id};
            var that = this;
            var token = localStorage.getItem("token")
            this.token = token;

            //发送请求
            /*
                接口: 根据id获取题目信息
                请求地址: http://localhost:8881/producer/question/select
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/question/select',
                data: params,
                headers:{token: token}
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.detail = res.data.questionList[0];
                    that.standardcode = '```java  ' + that.detail.answer1 + "\n"
                        + that.detail.answer2 + "\n"
                        + that.detail.answer3 + '```';
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });

            //发送请求
            /*
                接口: 根据id获取样例信息
                请求地址: http://localhost:8881/producer/test/select
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/test/select',
                data: params,
                headers:{token: token}
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.test = res.data.testList;
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });

            //查询测试通过状态
            axios({
                method: 'get',
                url: 'http://localhost:8881/producer/question/select/status',
                params: params,
                headers:{token: token}
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.testStatus = res.data.status;
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
</script>

<style scoped>
    .header , .info{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>